<template>
    <div class="inquire">

        <div class="inquire-content">
            <div class="inquire-detail">
                <div class="lable">
                    车牌:
                </div>
               <div class="car-brand">
                   <el-input placeholder="请输入内容" v-model="input5" class="input-with-select" size="small" clearable>
                       <el-select v-model="select" slot="prepend" placeholder="请选择" clearable>
                           <el-option label="餐厅名" value="1"></el-option>
                           <el-option label="订单号" value="2"></el-option>
                           <el-option label="用户电话" value="3"></el-option>
                       </el-select>
                       <el-button slot="append" icon="el-icon-search"  ></el-button>
                   </el-input>
               </div>

            </div>
            <div class="inquire-detail">
                <div class="lable">
                    VIN码:
                    </div>
                <div class="car-brand">
                    <el-input placeholder="请输入VIN码" size="mini" v-model="input5" class="input-with-select" clearable>
                        <el-button slot="append" @click="chooseCar" >选择车型</el-button>
                    </el-input>

                </div>
            </div>
            <div class="inquire-detail detail-pad" >
                <div class="lable"></div>
                <div class="car-brand car-detail">
                    <p class="detail">君威 2005款 2.5L GL AT 豪华版君威 2005款 2.5L GL AT </p>
                  </div>
            </div>
            <div class="inquire-detail detail-pad">
                <div class="car-brand again">
                    <span class="select-again" @click="chooseCar">重选车型</span>
                </div>
                <div class="car-brand again">
                    <span class="select-again" @click="sendInquiry">发送询价</span>
                </div>
            </div>
        </div>
        <el-select v-model="value" placeholder="请选择" @change="selectValue">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <car-type-component ref="car" @carSelected="selectedCar"></car-type-component>
    </div>
</template>
<script>
  import ChatContent from '@/components/chatContent'
  import CarTypeComponent from '@/components/carTypeComponent'
  import TTmessage from './../../service/TTmessage'
  import RongPackMessage from './../../service/RongPackMessage'
  import Message from './../../service/Message-Service'
  const _Message = new Message();
  export default {
    components: {
      CarTypeComponent,
      ChatContent
    },
    data() {
      return {
        code: this.$util.getQueryString('code'),
        select:'',
        input5:'',
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''

      }
    },
    mounted(){
      console.log(this.$util.getQueryString('code'));
    },
    computed: {
      changeChatObject () {
        return this.$store.state.chatObject;
      }
    },
    watch: {
      changeChatObject: function (chatObject, b) {
        this.targetId =chatObject.code;
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      chooseCar(){
        this.$refs.car.carModelFlag = true;
      },
      selectedCar(val){
        console.log(val)
      },
      selectValue(item){
        console.log(item)
      },
      sendInquiry(){
        this.sendMessageContent(null,'TT:CustomMsg',null,null,'http://www.rongcloud.cn/images/logo.png',123123,'询价单','二级询价单','http://www.rongcloud.cn/images/logo.png','二级菜单',1,'询价按钮',1)
      },
      sendMessageContent(content,msgType,name,size,imageUri,number,title,subTitle,imgUrl,summary,customType,btnTxt,enable){
        this.targetId = this.$util.getSessionStorage('targetId');
        let params = new  TTmessage(this.code,this.targetId,content,msgType,name,size,imageUri,number,title,subTitle,imgUrl,summary,customType,btnTxt,enable);
        let rongPackMessage = new RongPackMessage(content,msgType,name,size,imageUri,number,title,subTitle,imgUrl,summary,customType,btnTxt,enable);
       // this.chatContent.push(rongPackMessage);
        console.log(CarTypeComponent)
        _Message.sendMessage(params).then((res) => {
          //10 发送中 ，20 发送失败 30 发送成功
          if(res.code===200){
            rongPackMessage.sentStatus = 30;
          }else{
            rongPackMessage.sentStatus = 20;
          }
          this.$store.dispatch('changeChatContent',[rongPackMessage]);

        })
      },

    }
  }
</script>
<style scoped lang="scss" type="text/scss">
    .inquire{
        height:744px;
        width: 100%;
        .title{
            padding: 10px 0;
            height: 50px;
            box-sizing: border-box;
            border-bottom: 1px solid #C7C4C4;;
            h2{
                float: left;
                width: 280px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                text-align: left;
                padding-left: 20px;
            }
            .right{
                float: right;
                height: 30px;
                margin-right: 20px;
                .allInquire{
                    height: 30px;
                    line-height: 30px;
                    margin-right: 20px;
                    color: #3F96F5;
                    cursor: pointer;
                    font-size: 14px;
                }
            }

        }
        .inquire-content{
            height: 500px;
            width: 100%;
            .inquire-detail{
                height: 52px;
                .lable{
                    float: left;
                    width: 80px;
                    height: 42px;
                    line-height: 42px;
                    font-size: 14px;
                    color: #4A4A4A;
                }
                .car-brand{
                    width: 70%;
                    padding: 10px;
                    float: left;
                    box-sizing: border-box;

                }

                .car-detail{
                    width: 80%;
                    .detail{
                        width: 100%;
                        font-size: 14px;
                        text-align: left;
                        color: #000;
                    }

                }
            }
            .detail-pad{
                height: 30px;
                .again{
                    width: 200px;
                    padding: 0;
                    padding-left:10px ;
                    line-height: 30px;
                    .select-again{
                        width: 80px;
                        float: left;
                        color: #3F96F5;
                        cursor: pointer;
                        font-size: 14px;
                        text-align: left;
                    }
                }
            }

        }

    }

</style>
